<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = "https://"
            + request.getServerName()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <title>充值消费查询</title>
    <link rel="stylesheet" href="css/service.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/WdatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/handle.js"></script>

<script type="text/javascript">
    //var cardNo = "1212220000001307";
    var cardNo = "${cardNo}";// 卡号

    var halftransAmount = ""; // 半条的金额，用作链接传参
    var halftransOrderNo = ""; // 半条的订单号，用作链接传参

    var today = formatDate();
    var thisWeek = thisWeek();
    var startDate = [thisWeek[0], thisWeek[1], thisWeek[2]];
    // var startDate = [2017,1,1];
    var endDate = [today[0], today[1], today[2]];

    var chargeFlag = false;
    var chargeLoadingFlag = false;
    var chargeCurrentPage = 0;

    var rechargeFlag = false;
    var rechargeLoadingFlag = false;
    var rechargeCurrentPage = 0;

    var consumpFlag = false;
    var consumpLoadingFlag = false;

    var chargeStatusArray = ["已支付未到账", "支付成功"];
    var rechargeStatusArray = ["圈存失败", "圈存成功","圈存异常"];

    var getMoreText = [
        "<div class='getMore'>点击加载更多记录</div>",
        "<div class='noMore'>已无更多记录</div>"
    ];
    var nodataText = "<div class='nodata'><img src='img/nodata.png'><h3>查不到相关信息</h3><p>多出去走走,记得出行用ETC</p></div>";
    var nonetworkText = "<div class='nonetwork'><img src='img/nonetwork.png'><h3>网络似乎出了点问题</h3></div>"

    function getStartDate() {
        var y = $dp.cal.date.y;
        var m = $dp.cal.date.M;
        var d = $dp.cal.date.d;
        if (m.toString().length == 1) {
            m = "0" + m;
        }
        if (d.toString().length == 1) {
            d = "0" + d;
        }
        startDate = [y, m, d];
        $("#forstartDate").html(y + "年" + m + "月" + d + "日");
    }

    function getEndDate() {
        var y = $dp.cal.date.y;
        var m = $dp.cal.date.M;
        var d = $dp.cal.date.d;
        if (m.toString().length == 1) {
            m = "0" + m;
        }
        if (d.toString().length == 1) {
            d = "0" + d;
        }
        endDate = [y, m, d];
        $("#forendDate").html(y + "年" + m + "月" + d + "日");
    }

    function getChargeList() {
        console.log('step into getChargeList()')
        //如果正在请求，则结束函数
        if (chargeLoadingFlag) {
            return false;
        }

        var data = {
            cardNo: cardNo,
            beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
            endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2],
            currentPage: chargeCurrentPage + 1,
            pageSize: 10,
        };
        console.log(data);
        $(".loading").show();
        $(".chargebox").off('click', ".getMore", getChargeList);

        chargeLoadingFlag = true;
        $.ajax({
            url: 'card/getRechargeOrders',
            type: 'GET',
            dataType: 'json',
            data: data,
            timeout: 15000,
            cache: false,
            success: function (r) {
                console.log(r);
                $(".loading").hide();

                chargeLoadingFlag = false;
                if (r.respCode != "00") {
                    if ($(".chargebox").is(':empty')) {
                        $(".chargebox").append(nonetworkText);
                        return false;
                    }
                    errorToast(r.msg, 3);
                    return false;
                }

                chargeFlag = true;

                //移除获取更多的按钮和无信息的提示语
                $(".chargebox .getMore,.chargebox .nodata, .chargebox .nonetwork").remove();

                //返回结果为空时
                if (r.object.length == 0) {
                    $(".chargebox").append(nodataText);
                    return false;
                }
                for (var i = 0; i < r.object.length; i++) {
                    var item = r.object[i],
                            paymentChannel = item.paymentChannel,
                            rechargeChannel = item.rechargeChannel,
                            orderNo = item.rechargeOrderNo,
                            rechargeTime = item.rechargeTime,
                            inAmount = ((+item.inAmount) / 100).toFixed(2),
                            state = item.state,
                            acctInState = item.acctInState;

                    if (state != 1) {
                        //不显示未支付的订单
                        continue;
                    }

                    var status = state == 1 && acctInState == 1 ? chargeStatusArray[1] : chargeStatusArray[0];
                    var chargeItemText = "<div class='charge_item' data-orderno='" +
                            orderNo + "' data-inamount='" +
                            inAmount + "' data-chargestatus='" +
                            status + "' data-chargetime='" +
                            rechargeTime + "' data-chargechannel='" +
                            rechargeChannel + "' data-paymentChannel='" +
                            paymentChannel + "'><h2 class='charge_item_top'>" + rechargeTime + "<span>" + inAmount + "元</span></h2><h3 class='charge_item_body'>" + status + "<span>" + paymentChannel + "</span></h3></div></div>"
                    $(".chargebox").append(chargeItemText);

                }

                //没有下一页
                if (r.pager.hasNext == false) {
                    console.log('hasNext = false');
                    $(".chargebox").append(getMoreText[1]);
                    return false;
                }
                $(".chargebox").on('click', ".getMore", getChargeList).append(getMoreText[0]);
                chargeCurrentPage = r.pager.currentPage;
            },
            error: function (e) {
                console.log(e)
                $(".loading").hide();
                $(".chargebox").on('click', ".getMore", getChargeList)
                chargeLoadingFlag = false;

                if ($(".chargebox").is(':empty')) {
                    console.log('$(".chargebox") is empty');
                    $(".chargebox").append(nonetworkText);
                    return false;
                }
                errorToast("", 3);


            }
        });

    }

    function getRechargeList() {
        console.log('step into getRechargeList()')

        //如果正在请求，则结束
        if (rechargeLoadingFlag) {
            return false;
        }
        var data = {
            cardNo: cardNo,
            beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
            endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2],
            currentPage: rechargeCurrentPage + 1,
            pageSize: 10
        };
        console.log(data);

        $(".loading").show();
        $(".rechargebox").off('click', ".getMore", getRechargeList);
        rechargeLoadingFlag = true;
        $.ajax({
            url: 'card/getLoadOrders',
            type: 'GET',
            dataType: 'json',
            data: data,
            timeout: 15000,
            cache: false,
            success: function (r) {
                console.log(r);
                rechargeLoadingFlag = false;//请求完成，允许下一次请求；

                $(".loading").hide();

                if (r.respCode != "00") {
                    if ($(".rechargebox").is(':empty')) {
                        $(".rechargebox").append(nonetworkText);
                        return false;
                    }
                    errorToast(r.msg, 3);
                    return false;
                }

                rechargeFlag = true;
                $(".rechargebox .getMore, .rechargebox .nodata, .rechargebox .nonetwork").remove();

                if (r.object.length == 0) {
                    $(".rechargebox").append(nodataText);
                    return false;
                }
                for (var i = 0; i < r.object.length; i++) {

                    var item = r.object[i],
                            loadtype = item.loadtype,
                            loadchannel = item.loadchannel,
                            orderNo = item.ordernumber,
                            loadtime = item.loadtime,
                            loadamount = ((+item.loadamount) / 100).toFixed(2),
                            loadstate = item.loadstate;
                    var loadtypeText = loadtype;
                    // 显示圈存异常
                    if (loadstate == 0 || loadstate == 2 || loadstate == 4) {
                        rechargeStatus = 2;
                        loadtypeText = "<span class = 'hanlde-btn sub-hanlde-btn' onclick='goToHalftransHandle(event,this,true)'>异常处理</span>";
                        // 显示圈存成功
                    }else if (loadstate == 1) {
                        rechargeStatus = 1;

                        // 显示圈存失败
                    }else {
                        rechargeStatus = 0;
                        loadtypeText = "<span class = 'hanlde-btn sub-hanlde-btn'>已转人工客服</span>";
                    }
                    //        rechargeStatus = loadstate == 1 ? 1 : 0;
                    //var loadtypeText = loadstate != 4 ? loadtype : "<span class = 'hanlde-btn sub-hanlde-btn' onclick='goToHalftransHandle(event,this,true)'>异常处理</span>";

                    var rechargeItemText = "<div class='recharge_item' data-loadchannel='" +
                            loadchannel + "' data-loadtime='" +
                            loadtime + "' data-orderno='" +
                            orderNo + "' data-loadtype='" +
                            loadtype + "' data-loadamount='" +
                            loadamount + "' data-rechargestatus='" +
                            rechargeStatusArray[rechargeStatus] + "' data-loadstate='" + loadstate + "'><h2 class='recharge_item_top'>" + loadtime + "<span>" + loadamount + "元</span></h2><h3 class='recharge_item_body abn-clr" + rechargeStatus + "'>" + rechargeStatusArray[rechargeStatus] + " <span class='abn-clr1'>" + loadtypeText + "</span></h3></div>"
                    $(".rechargebox").append(rechargeItemText);

                }

                //没有下一页
                if (r.pager.hasNext == false) {
                    console.log('hasNext = false');
                    $(".rechargebox").append(getMoreText[1]);
                    return false;
                }
                $(".rechargebox").on('click', ".getMore", getRechargeList).append(getMoreText[0]);
                rechargeCurrentPage = r.pager.currentPage;
            },
            error: function (e) {
                console.log(e);
                rechargeLoadingFlag = false;//请求完成，允许下一次请求；
                $(".loading").hide();

                if ($(".rechargebox").is(':empty')) {
                    $(".rechargebox").append(nonetworkText);
                    return false;
                }
                errorToast("", 3);

            }
        });

    }

    function getConsumpList() {
        console.log('step into getConsumpList()')

        //如果正在请求，则结束
        if (consumpLoadingFlag) {
            return false;
        }

        var data = {
            cardNo: cardNo,
            beginTime: startDate[0] + "-" + startDate[1] + "-" + startDate[2],
            endTime: endDate[0] + "-" + endDate[1] + "-" + endDate[2]
            // beginTime: "2016-10-01",
            // endTime: '2016-10-31',
        };
        console.log(data);
        $(".loading").show();
        $(".consumpbox").off('click', ".getMore", getConsumpList);
        consumpLoadingFlag = true;
        $.ajax({
            url: 'card/getConsumebills',
            type: 'GET',
            dataType: 'json',
            data: data,
            timeout: 15000,
            cache: false,
            success: function (r) {
                console.log(r);
                $(".loading").hide();
                consumpLoadingFlag = false;//请求完成，允许下一次请求；

                if (r.respCode != "00") {
                    if ($(".consumpbox").is(':empty')) {
                        $(".consumpbox").append(nonetworkText);
                        return false;
                    }
                    errorToast(r.msg, 3);
                    return false;
                }

                consumpFlag = true;

                $(".consumpbox .getMore, .consumpbox .nodata, .consumpbox .nonetwork").remove();
                if (r.object.length == 0 || !r.object.length) {
                    $(".consumpbox").append(nodataText);
                    return false;
                }


                for (var i = 0; i < r.object.length; i++) {

                    var item = r.object[i],
                            entrytime = item.entrytime,
                            exittime = item.exittime,
                            entrystation = item.entrytentrystationime,
                            exitstation = item.exitstation,
                            atradebal = (+item.atradebal).toFixed(2), //余额
                            trademoney = (+item.trademoney).toFixed(2), //通行费
                            discountamount = (+item.discountamount).toFixed(2),// 优惠金额
                            timeConsume = item.timeConsume,
                            vlp = item.vlp;//车牌号
                    var timeConsumeText = "";

                    if (timeConsume != null || timeConsume != "") {
                        timeConsumeText = "<tr><td>耗时</td><td>"+ timeConsume +"h</td></tr>"
                    }

                    var consumpItemText = "<div class='consump_item' data-exittime='"+
                            exittime+"' data-exitstation='"+
                            exitstation + "' data-entrytime='"+
                            entrytime + "' data-entrystation='" +
                            entrystation + "' data-vlp='"+
                            vlp +"' data-atradebal='" +
                            atradebal + "' data-discountamount='"+
                            discountamount + "' data-trademoney='"+
                            trademoney + "' data-timeConsume='"+ timeConsume +"'><h2>"+exittime+"<span>¥"+
                            trademoney +"</span></h2><p>卡内余额"+atradebal+"元<span>优惠<i>"+
                            discountamount + "元</span></i></p></div>"
                    $(".consumpbox").append(consumpItemText);

                }
                //没有下一页
                if (r.pager.hasNext == false) {
                    console.log('hasNext = false');
                    $(".consumpbox").append(getMoreText[1]);
                    return false;
                }
                $(".consumpbox").on('click', ".getMore", getConsumpList).append(getMoreText[0]);
                consumpCurrentPage = r.pager.currentPage;
            },
            error: function (e) {
                console.log(e)
                consumpLoadingFlag = false;//请求完成，允许下一次请求；
                $(".loading").hide();

                if ($(".consumpbox").is(':empty')) {
                    $(".consumpbox").append(nonetworkText);
                    return false;
                }
                errorToast("", 3);


            }
        });

    }
    // 遍历对象 将信息写入详细信息弹出框
    function writeToDom(obj) {
        if (!obj) {
            return
        }       
        console.log(obj)
        for (key in obj) {
            $(key).html(obj[key])
        }
    }
    function goToHalftransHandle(e, ele, type) {
        console.log(ele);
        e.stopPropagation();
        if (type == true) {
            halftransAmount = $(ele).parents(".recharge_item").attr("data-loadamount") * 100;
            halftransOrderNo  = $(ele).parents(".recharge_item").attr("data-orderno");
        }

        window.location.href = "transfer/toRechargeException?cardNo=" + cardNo + "&money=" + halftransAmount + "&orderNo=" + halftransOrderNo;
    }


    $(function () {
        var skin = "default";
        if (document.body.clientWidth <= 767) {
            skin = "forPhone";
        }
        window.onresize = function (e) {
            console.log(e)
            if (document.body.clientWidth <= 767) {
                skin = "forPhone";
            } else {
                skin = "default";
            }
        };
        //获取默认的起始、结束时间
        $("#startDate").val(startDate[0] + "年" + startDate[1] + "月" + startDate[2] + "日");
        $("#endDate").val(endDate[0] + "年" + endDate[1] + "月" + endDate[2] + "日");

        //绑定时间选择组件
        $("#forstartDate").html(startDate[0] + "年" + startDate[1] + "月" + startDate[2] + "日").on('click', function (e) {
            e.preventDefault();
            WdatePicker({
                el: 'startDate',
                dateFmt: 'yyyy年MM月dd日',
                startDate: thisWeek[0] + '-' + thisWeek[1] + '-' + thisWeek[2],
                firstDayOfWeek: 1,
                onpicked: getStartDate,
                minDate: '%y-%M-{%d-90}',
                maxDate: '#F{$dp.$D(\'endDate\')}',
                isShowClear: false,
                isShowOK: false
                // skin: skin
            })
        }).on("click", function (e) {
            $("iframe").parent("div").addClass('dateArea');
            $(this).addClass('clr-blue').siblings('span').removeClass('clr-blue');

        });
        $("#forendDate").html(endDate[0] + "年" + endDate[1] + "月" + endDate[2] + "日").on('click', function (e) {
            e.preventDefault();
            WdatePicker({
                el: 'endDate',
                dateFmt: 'yyyy年MM月dd日',
                firstDayOfWeek: 1,
                onpicked: getEndDate,
                minDate: "#F{$dp.$D(\'startDate\')}",
                maxDate: '%y-%M-%d',
                isShowClear: false,
                isShowOK: false

            })
        }).on("click", function (e) {
            $("iframe").parent("div").addClass('dateArea');
            $(this).addClass('clr-blue').siblings('span').removeClass('clr-blue');
        });

        $(".search_btn").on('click', function (e) {
            e.preventDefault();
            $(".mask_layer").fadeIn(200);
            $("#forendDate, #forstartDate").removeClass('clr-blue');

        });
        $(".cancelChooseBtn").on('click', function (e) {
            e.preventDefault();
            $(".mask_layer").fadeOut(200);
        });

        //点击日期选择时重置所有信息和flag
        $(".chooseDateBtn").on('click', function (e) {
            e.preventDefault();

            // console.log("startDate:"+startDate[0]+startDate[1]+startDate[2]);
            // console.log("endDate:"+endDate[0]+endDate[1]+endDate[2]);

            chargeFlag = rechargeFlag = consumpFlag = false;
            chargeCurrentPage = rechargeCurrentPage = 0;

            $(".mask_layer").fadeOut(200);

            //重置所有list，返回到第一个菜单
            $(".chargebox, .rechargebox, .consumpbox").empty();

            var index = $(".menulist li span.menulist_selected").parent("li").index();
            console.log(index);
            $(".menulist li").eq(index).trigger('click');

        });

        // 隐藏详细信息
        $(".charge_detail_close,.recharge_detail_close,.consump_detail_close").on('click', function (e) {
            e.preventDefault();
            $(".recharge_detail, .charge_detail, .consump_detail, .detail_box").hide();
        });
        // 隐藏处理异常按钮
        $(".recharge_detail_close").click(function (e) {
            $(".hanlde-btn").addClass('none')
        });

        // 充值 弹出详细信息
        $(".chargebox").on('click', ".charge_item", function (e) {
            e.preventDefault();
            writeToDom({
                ".charge_detail_status": $(this).attr("data-chargestatus"),
                ".charge_detail_inamount": $(this).attr("data-inamount"),
                ".charge_detail_orderno": $(this).attr("data-orderno"),
                ".charge_detail_chargetime": $(this).attr("data-chargetime"),
                ".charge_detail_paymentchannel": $(this).attr("data-paymentchannel"),
                ".charge_detail_chargechannel": $(this).attr("data-chargechannel")
            });
            $(".detail_box>div").hide();
            $(".charge_detail, .detail_box").show();
        });
        // 圈存 弹出详细信息
        $(".rechargebox").on('click', ".recharge_item", function (e) {
            e.preventDefault();
            writeToDom({
                ".recharge_detail_status": $(this).attr("data-rechargestatus"),
                ".recharge_detail_loadamount": $(this).attr("data-loadamount"),
                ".recharge_detail_orderno": $(this).attr("data-orderno"),
                ".recharge_detail_loadtime": $(this).attr("data-loadtime"),
                ".recharge_detail_loadchannel": $(this).attr("data-loadchannel"),
                ".recharge_detail_loadtype": $(this).attr("data-loadtype")
            });

            // 圈存异常 显示处理按钮
            if ($(this).attr("data-loadstate") == 4 ||
                 $(this).attr("data-loadstate") == 2||
                    $(this).attr("data-loadstate") == 0) {
                $('.hanlde-btn').removeClass('none');
                halftransAmount = $(this).attr("data-loadamount") * 100;
                halftransOrderNo =  $(this).attr("data-orderno");
            }

            $(".detail_box>div").hide();
            $(".recharge_detail, .detail_box").show();
        });
        // 消费 弹出详细信息
        $(".consumpbox").on('click', ".consump_item", function (e) {
            e.preventDefault();
            writeToDom({
                ".consump_detail_exittime": $(this).attr("data-exittime"),
                ".consump_detail_exitstation": $(this).attr("data-exitstation"),
                ".consump_detail_entrytime": $(this).attr("data-entrytime"),
                ".consump_detail_entrystation": $(this).attr("data-entrystation"),
                ".consump_detail_atradebal": $(this).attr("data-atradebal"),
                ".consump_detail_vlp": $(this).attr("data-vlp"),
                ".consump_detail_atradebal": $(this).attr("data-atradebal"),
                ".consump_detail_discountamount": $(this).attr("data-discountamount"),
                ".consump_detail_trademoney": $(this).attr("data-trademoney")
            });
            if ($(this).attr("data-timeconsume")) {
                writeToDom({
                    ".consump_timeconsume": $(this).attr("data-timeConsume")+"h",
                });
                $("timeconsume-box").show();

            }else{
                $("timeconsume-box").hide();
            }
            $(".detail_box>div").hide();
            $(".consump_detail, .detail_box").show();
        });

        //点击更多时再次请求获取信息
        $(".chargebox").on('click', ".getMore", getChargeList);
        $(".rechargebox").on('click', ".getMore", getRechargeList);
        $(".consumpbox").on('click', ".getMore", getConsumpList);

        //选择查询的目录
        $(".menulist li").on('click', function (e) {
            var index = $(this).index();
            $(this).find('span').addClass('menulist_selected');
            $(this).siblings('li').find('span').removeClass('menulist_selected');

            $(".body_box > .queryboxwrap").eq(index).siblings('.queryboxwrap').hide();
            $(".body_box > .queryboxwrap").eq(index).show();

            switch (index) {
                case 0:
                    if (!chargeFlag) {
                        getChargeList();
                    }
                    break;
                case 1:
                    // 圈存

                    if (!rechargeFlag) {
                        getRechargeList();
                    }
                    break;
                case 2:
                    // 消费
                    if (!consumpFlag) {
                        getConsumpList();
                    }
                    break;
                default:
                    // statements_def
                    break;
            }
        });


        //页面加载时默认获取充值信息
        getChargeList();
    })


</script>
</head>
<body class="ed">
<div class="wrap record_wrap">
    <div class="top_box">

        <div class="menubox">
            <ul class="menulist">
                <li>
                    <span class="menulist_selected">账户充值</span>
                </li>
                <li>
                    <span>圈存记录</span>
                </li>
                <li>
                    <span>消费记录</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="body_box">
        <div class="chargebox queryboxwrap"></div>

        <div class="rechargebox queryboxwrap" style="display:none"></div>
        <div class="consumpbox queryboxwrap" style="display:none"></div>

    </div>
    <div class="detail_box" style="display:none">
        <div class="charge_detail" style="display:none"> <i class = 'charge_detail_close'></i>
            <h2 class="charge_detail_status"></h2>
            <h3  class="hasBorder">
                <span class="charge_detail_inamount"></span>
                元
            </h3>
            <table class="charge_detail_table">
                <tbody>
                <tr>
                    <td>订单号</td>
                    <td class="charge_detail_orderno"></td>
                </tr>

                <tr>
                    <td>充值时间</td>
                    <td class='charge_detail_chargetime'></td>
                </tr>
                <tr>
                    <td>支付方式</td>
                    <td class='charge_detail_paymentchannel'></td>
                </tr>
                <tr>
                    <td>充值渠道</td>
                    <td class='charge_detail_chargechannel'></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="recharge_detail" style="display:none"> <i class = 'recharge_detail_close'></i>
            <h2 class="recharge_detail_status"></h2>
            <h3  class="hasBorder">
                <span class="recharge_detail_loadamount"></span>
                元
            </h3>
            <p class="hanlde-btn none" onclick="goToHalftransHandle(event,this,false)">异常处理</p>
            <table class="recharge_detail_table">
                <tbody>
                <tr>
                    <td>订  单  号</td>
                    <td class="recharge_detail_orderno"></td>
                </tr>

                <tr>
                    <td>圈存时间</td>
                    <td class='recharge_detail_loadtime'></td>
                </tr>
                <tr>
                    <td>圈存方式</td>
                    <td class='recharge_detail_loadtype'></td>
                </tr>
                <tr>
                    <td>圈存渠道</td>
                    <td class='recharge_detail_loadchannel'></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="consump_detail">
            <i class = 'consump_detail_close'></i>

            <h3 >
                <span class="consump_detail_trademoney"></span>
                元
                <i>消费</i>
            </h3>
            <h4 class="hasBorder">
                优惠
                <span class='consump_detail_discountamount'></span>
                元
            </h4>
            <table class="consump_detail_table">
                <tbody>
                <tr>
                    <td>卡内余额</td>
                    <td >¥<span class="consump_detail_atradebal"></span></td>
                </tr>

                <tr>
                    <td>车牌号</td>
                    <td class='consump_detail_vlp'></td>
                </tr>
                <tr>
                    <td>优惠</td>
                    <td>¥<span class='consump_detail_discountamount'></span></td>
                </tr>
                <tr>
                    <td>入口</td>
                    <td class='consump_detail_entrystation'></td>
                </tr>
                <tr>
                    <td>入口时间</td>
                    <td class="consump_detail_entrytime"></td>
                </tr>

                <tr>
                    <td>出口</td>
                    <td class='consump_detail_exitstation'></td>
                </tr>
                <tr>
                    <td>出口时间</td>
                    <td class='consump_detail_exittime'></td>
                </tr>
                <tr class="timeconsume-box">
                    <td>耗时</td>
                    <td class='consump_timeconsume'></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="mask_layer " style="display:none">
    <div class="search_box">
        <p>
            <input id="startDate">
            <span id="forstartDate"></span>
            至
            <input id="endDate">
            <span id="forendDate"></span>
        </p>
        <h3>
            <span class='cancelChooseBtn'>取消</span>
            <span class="chooseDateBtn">确定</span>
        </h3>
    </div>
</div>
<img src="img/search2.png" class="search_btn">
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none"></div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
</body>
</html>